<template>
    <div class="related-mv">
      <!-- mv详情 -->
      <div class="mv-dtl">
        <!-- mv封面 -->
        <img :src="item.cover" />
        <!-- 播放次数 -->
        <span class="mv-play">{{ item.playCount | formatNumber }}</span>
      </div>

      <!-- mv信息 -->
      <div class="mv-info">
        <!-- mv名称 -->
        <p class="mv-name  thide">{{ item.name }}</p>
        <!-- mv-时间-作者 -->
        <p class="mv-time-atsname thide">
          <!-- <span class="mv-time">{{ item.}}</span> -->
          <router-link :to="`/singer/${item.artistId}`">
            <span class="mv-atsnam" style="color: #818181;">作者: {{ item.artistName }}</span>
          </router-link>
        </p>
      </div>
    </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  filters: {
    formatNumber(value) {
      if (value / 10000 >= 10000) {
        return (value / 100000000).toFixed(1) + "亿";
      } else if (value / 10000 > 0) {
        return (value / 10000).toFixed(1) + "万";
      } else {
        return value;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.related-mv {
  display: flex;
  padding: 10px;
  
  .mv-dtl {
    position: relative;
    height: 80px;
    img {
      height: 80px;
      display: block;
      border-radius: 10px;
      position: relative;
    }
    .mv-play {
      position: absolute;
      top: 2px;
      right: 5px;
      font-size: 12px;
      color: white;
      padding-left: 13px;
      background: url("../assets/listen.svg") no-repeat;
      background-size: 11px 10px;
      background-position: 0;
      z-index: 2;
    }
    &::after {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 20px;
      z-index: 2;
      background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      );
      border-radius: 10px;
    }
  }
  .mv-info {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-left: 8px;
    flex: 1 1 auto;
    width: 0;
    .mv-name{
      font-size: 18px;
      color: black;
    }
    .mv-time-atsname{
      color: #818181;
    }
    .thide{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
    }
  }
}
</style>